<template>
    <div class="messageBox">
        <!--<div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-copy"></i> tab选项卡</el-breadcrumb-item>
            </el-breadcrumb>
        </div>-->
        <div class="container">
            <el-tabs v-model="message">
                <el-tab-pane :label="`未读消息(${unreadCount})`" name="first">
                    <el-table :data="unreadMessage" :show-header="false" style="width: 100%">
                        <el-table-column>
                            <template slot-scope="scope">
                                <span :class="{'message-title': scope.row.url}" v-html="scope.row.realTitle || ''" @click="handleOpen(scope.row.url, scope.row.tagName, true, scope.row.id)"></span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="ts" width="180"></el-table-column>
                        <el-table-column width="120">
                            <template slot-scope="scope">
                                <el-button size="small" @click="markReaded(scope.row.id)">标为已读</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="handle-row">
                        <el-button type="primary" @click="markAllSign">全部标为已读</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane :label="`已读消息(${readedCount})`" name="second">
                    <template v-if="message === 'second'">
                        <el-table :data="readedMessage" :show-header="false" style="width: 100%">
                            <el-table-column>
                                <template slot-scope="scope">
                                    <span :class="{'message-title': scope.row.url}" v-html="scope.row.realTitle || ''" @click="handleOpen(scope.row.url, scope.row.tagName)"></span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="ts" width="150"></el-table-column>
                            <el-table-column width="120">
                                <template slot-scope="scope">
                                    <el-button type="danger" @click="handleDel(scope.row.id)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="handle-row">
                            <el-button type="danger" @click="handleDelAll()">删除全部</el-button>
                        </div>
                    </template>
                </el-tab-pane>
                <el-tab-pane :label="`回收站(${trashCount})`" name="third">
                    <template v-if="message === 'third'">
                        <el-table :data="trashMessage" :show-header="false" style="width: 100%">
                            <el-table-column>
                                <template slot-scope="scope">
                                    <span :class="{'message-title': scope.row.url}" v-html="scope.row.realTitle || ''" @click="handleOpen(scope.row.url, scope.row.tagName)"></span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="date" width="150"></el-table-column>
                            <el-table-column width="120">
                                <template slot-scope="scope">
                                    <el-button @click="handleRestore(scope.row.id)">还原</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="handle-row">
                            <el-button type="danger" @click="handleClear()">清空回收站</el-button>
                        </div>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
let Base64 = require('js-base64').Base64;
import appUtil from '~/assets/utils/appUtil.js';
import { createNamespacedHelpers } from 'vuex';
const { mapState,mapMutations, mapActions } = createNamespacedHelpers('nbhsjModule');
const {    mapMutations: mapTagMutations} = createNamespacedHelpers('tagModule');
export default {
    name: 'tabs',
    data() {
        return {
            message: 'first',
            showHeader: false,

            /*unread: [{
                    date: '2018-04-19 20:00:00',
                    title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护',
                },{
                    date: '2018-04-19 21:00:00',
                    title: '今晚12点整发大红包，先到先得',
                }],
                read: [{
                    date: '2018-04-19 20:00:00',
                    title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护'
                }],
                recycle: [{
                    date: '2018-04-19 20:00:00',
                    title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护'
                }]*/
        };
    },
    created(){
        // console.log(this.messageList);
    },
    methods: {
        ...mapMutations(['markAsReaded','markAll','delMessage','delAllMessage','restoreMessage','clearTrash']),
        ...mapActions([]),
        ...mapTagMutations(['addTag']),
        // 标记已读
        markReaded(id) {
            this.markAsReaded(id);
            this.$axios.post('/ptp-msg/apis/unread/doRead/' + id).then( res => {
                console.log(res);
            });
        },
        // 全部标记已读
        markAllSign(){
            this.markAll();
            this.$axios.post('/ptp-msg/apis/unread/doRead/all/' + appUtil.getSes('userCode')).then( res => {
                console.log(res);
            });
        },
        // 打开详情
        handleOpen (url, tagName, shouldMarkAsReaded, id) {
            let commonData = sessionStorage.getItem('commonData');
            if(!commonData || commonData === 'undefined') {
                commonData = localStorage.getItem('commonData');
            }

            url += url.indexOf('?') > -1 ? '&' : '?';
            url += 'roleId=' + (Base64.decode(JSON.parse(commonData).svRoleId) || '') +
                    '&roleCode=' + (Base64.decode(JSON.parse(commonData).svRoleCode) || '');
            console.log(url);
            let menu = {
                url: url,
                id: id,
                name: '单据详情'
            };
            this.addTag(menu);
            if (shouldMarkAsReaded) {
                this.markReaded(id);
            }
        },
        // 删除已读
        handleDel(id) {
           
            this.delMessage(id);
            this.$axios.delete('/ptp-msg/apis/readed/' + id).then( res => {
                console.log(res);
            });
        },
        // 删除全部已读
        handleDelAll(){
            this.delAllMessage();
            this.$axios.delete('/ptp-msg/apis/readed/all/' + appUtil.getSes('userCode')).then( res => {
                console.log(res);
            });
        },
        handleRestore(id) {
           
            this.restoreMessage(id);
            this.$axios.delete('/ptp-msg/apis/trash/reduction/' + id).then( res => {
                console.log(res);
            });
        },
        handleClear() {
            this.clearTrash();
            this.$axios.delete('/ptp-msg/apis/trash/' + appUtil.getSes('userCode'));
        }
    },
    computed: {
        ...mapState({
            messageList:state => state.messageList
        }),
        unreadCount(){
            return this.messageList.unread.length;
        },
        readedCount(){
            return this.messageList.readed.length;
        },
        trashCount(){
            return this.messageList.trash.length;
        },
        unreadMessage(){
            return this.messageList.unread.map(msg => {
                msg.tagName = msg.title.split('###')[0];
                let realTitle = msg.title.split('###')[1] || msg.title.split('###')[0];
                msg.realTitle = realTitle.replace(/\{\{/g, '<span class=\'strong-message\'>').replace(/\}\}/g, '</span>');
                return msg;
            });
        },
        readedMessage(){
            return this.messageList.readed.map(msg => {
                msg.tagName = msg.title.split('###')[0];
                let realTitle = msg.title.split('###')[1] || msg.title.split('###')[0];
                msg.realTitle = realTitle.replace(/\{\{/g, '<span class=\'strong-message\'>').replace(/\}\}/g, '</span>');
                return msg;
            });
        },
        trashMessage(){
            return this.messageList.trash.map(msg => {
                msg.tagName = msg.title.split('###')[0];
                let realTitle = msg.title.split('###')[1] || msg.title.split('###')[0];
                msg.realTitle = realTitle.replace(/\{\{/g, '<span class=\'strong-message\'>').replace(/\}\}/g, '</span>');
                return msg;
            });
        },
    }
};

</script>
<style scoped lang="scss">
.messageBox{
    padding: 10px;
    height: 100%;
    .container{
        border-radius: 6px;
        background: #fff;
        width: 98%;
        height: 96%;
        padding: 1%;
    }
}
.message-title{
    cursor: pointer;
}
.strong-message{
    font-weight: 700;
    margin: 0 2px;
}
.handle-row{
    margin-top: 30px;
}
</style>

